<template>
  <div>
    <el-card class="box-card" shadow="never" border="false">
  <template #header>
    <div class="header">
      <el-input class="search" v-model="input" placeholder="根据用户名搜索"></el-input>
      <el-button @click="clear">清空</el-button>
      <el-button type="primary" @click="searchName">搜索</el-button>
      <el-button style="float: right" type="success" @click="open('add')"> <svg-icon icon-class="edit"></svg-icon> 新增权限组</el-button>
    </div>
    <el-alert
    :title="`共 ${total} 条记录`"
    effect="dark"
    :closable="false"
    show-icon
    type="info">
  </el-alert>

  </template>
 <el-table v-loading="loading" :data="tableData" stripe style="width: 100%"  :default-sort = "{prop: 'date', order: 'descending'}" >
   <el-table-column

      type="selection"
      width="150">
    </el-table-column>
      <el-table-column prop="title" label="用户名" width="300" header-align="center" align="center"></el-table-column>
          <el-table-column sortable prop="create_date" label="日期" width="700" header-align="center" align="center"  ></el-table-column>

          <el-table-column label="操作" header-align="center" align="center">
            <template #default="{ row }">
              <div class="actions">
                  <el-button type="primary" icon="el-icon-edit" circle plain @click="open('edit',row.id)"></el-button>
                  <el-button type="danger" icon="el-icon-delete" circle plain @click="del(row.id)"></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
         <div class="pagination">   <PageTool :total="total"
         :paginationPage="queryObj.page"
         :paginationPagesize="queryObj.pagesize"
         @pageChange="onPageChange"
         @pageSizeChange="onPageSizeChange"
        ></PageTool></div>
</el-card>
     <PermissionsAdd
     ref="editPermission"
     :text="text"
     :pageTitle="pageTitle"
     :ruleInline="ruleInline"
     @handleCloseModal="handleCloseModal"
     @newDataes="newDataes"
     ></PermissionsAdd>
  </div>
</template>
<script>
import PermissionsAdd from '@/module-manage/components/permissions-add'
import PageTool from '@/module-manage/components/page-tool'
import { list, remove } from '@/api/base/permissions.js'
export default {
  components: {
    PageTool,
    PermissionsAdd
  },
  data () {
    return {
      loading: true,
      input: '',
      pageTitle: '权限组',
      tableData: [],
      total: 0,
      type: '',
      queryObj: {
        page: 1,
        pagesize: 10

      },
      ruleInline: {
        // 表单验证
        title: [{ required: true, message: '用户名不能为空', trigger: 'blur' }]
      }
    }
  },
  async created () {
    this.initData()
  },
  computed: {
    text () {
      if (this.type === 'add') return '创建'
      if (this.type === 'edit') return '编辑'
      else return ''
    },
    renderList () {
      return this.tableData.filter(item => item.title.includes(this.input))
    }
  },
  methods: {
    async  initData () {
      const res = await list(this.queryObj)
      this.tableData = res.data.list
      this.total = res.data.counts
      this.tableData.forEach(item => {
        item.create_date = item.create_date.split('T')[0].substring(0, 10)
      })
      this.loading = false
    },
    // toggleSelection (rows) {
    //   if (rows) {
    //     rows.forEach(row => {
    //       this.$refs.multipleTable.toggleRowSelection(row)
    //     })
    //   } else {
    //     this.$refs.multipleTable.clearSelection()
    //   }
    // },
    // handleSelectionChange (val) {
    //   this.multipleSelection = val
    // }
    onPageSizeChange (val) {
      this.queryObj.pagesize = val
      this.queryObj.page = 1
      this.initData()
    },
    onPageChange (val) {
      this.queryObj.page = val
      this.initData()
    },

    searchName () {
      this.queryObj.page = 1
      this.$nextTick(() => {
        this.tableData = this.renderList
      })
    },

    clear () {
      this.input = ''
      this.initData()
    },

    open (type, id) {
      this.type = type
      this.$refs.editPermission.dialogFormV()
      this.$refs.editPermission.handleResetForm()
      if (this.type === 'edit') {
        this.$refs.editPermission.hanldeEditForm(id)
      }
    },
    // 取消
    handleCloseModal () {
      this.$refs.editPermission.dialogFormH()
    },
    // 提交表单,重新渲染
    newDataes () {
      this.initData()
      this.$refs.editPermission.handleResetForm()
    },

    // 删除
    async del (id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const obj = { id }
        await remove(obj)
        this.initData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }

  }
}
</script>

<style scoped lang='less'>
/deep/ .el-alert--info.is-dark{
  background-color: #f4f4f5;
  color:#909399
}
/deep/ .el-table th {
  background-color: #fafafa;
}
.box-card{
  margin: 10px auto;
  width: 95%;
  padding: 20px;
  border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    -webkit-transition: .3s;
    transition: .3s;
     .pagination{
  margin-top: 10px;
  float: right;
 }
}
 .header{
  margin-bottom: 10px;
  .search{
  width: 200px;
  margin-right: 10px;
 }

 }
</style>
